<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hidden {
            display: none;
        }

        .red {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 
            class 写法
            1 对象 :class="{hidden:true}"
            2 数组的写法 :class="[obj1,obj2]"
         -->
         <!-- class
            对象的写法
            <h1 :class="{hidden:true}">🛏</h1>
            <h1 :class="{hidden:false}">🛏</h1>
        -->
        <!-- 数组写法 -->
        <h1 :class="[{hidden:false},{red:true}]"></h1>
        <!-- 
            style  写法
            * 属性 要从 短横线形式 改成 驼峰写法
            1 对象
            2 数组
         -->
        <h1 :style="{fontSize:'100px'}">💡</h1>
        <h1 :style="[{fontSize:'100px'},{border:'1px  solid #ddd'}]">💡</h1>

    </div>
</body>
<script src="https://cn.vuejs.org/js/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app"
    });
</script>

</html>